<template>
  <view class="uni-popup" :class="[popupClass]" @touchmove.stop.prevent="clear">
    <view v-if="mask" class="uni-popup__mask" :class="[maskClass]" @click="onTap" />
    <view class="uni-popup__wrapper" :class="[wrapperClass]">
      <view class="uni-popup__wrapper-box">
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UniPopup',
  props: {
    // 开启动画
    animation: {
      type: Boolean,
      default: true
    },
    // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
    type: {
      type: String,
      default: 'center'
    },
    // 是否显示遮罩
    mask: {
      type: Boolean,
      default: true
    },
    // 点击遮罩是否关闭
    maskClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      duration: 300,
      ani: [],
      showPopup: false,
      showTrans: false,
      maskClass: {
        'uni-popup__mask--show': false
      },
      popupClass: {
        'uni-popup--show': false
      },
      wrapperClass: {}
    }
  },
  watch: {
    type: {
      handler: function(type) {
        this.wrapperClass = {
          ['uni-popup__wrapper--' + type]: true
        }
      },
      immediate: true
    }
  },
  created() {
    this.wrapperClass = {
      ['uni-popup__wrapper--' + this.type]: true
    }
  },
  methods: {
    clear(e) {},
    open() {
      this.showPopup = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.popupClass = {
            'uni-popup--show': true
          }
          this.maskClass = {
            'uni-popup__mask--show': true
          }
        }, 20)
      })
      this.$emit('open')
    },
    close(type) {
      setTimeout(() => {
        this.popupClass = {
          'uni-popup--show': false
        }
        this.maskClass = {
          'uni-popup__mask--show': false
        }
        setTimeout(() => {
          this.showPopup = false
        }, 300)
      }, 20)
      this.$emit('close')
    },
    onTap() {
      if (!this.maskClick) return
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.uni-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  overflow: hidden;
  
  &__mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s;
    
    &--show {
      opacity: 1;
    }
  }
  
  &__wrapper {
    position: absolute;
    
    &--center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 600px;
      border-radius: 10px;
      overflow: hidden;
    }
    
    &--top {
      top: 0;
      left: 0;
      right: 0;
      transform: translateY(-100%);
      transform: translateZ(0);
      transition: transform 0.3s;
    }
    
    &--bottom {
      bottom: 0;
      left: 0;
      right: 0;
      transform: translateY(100%);
      transform: translateZ(0);
      transition: transform 0.3s;
    }
  }

  &--show {
    .uni-popup__wrapper--center {
      transform: translate(-50%, -50%);
    }

    .uni-popup__wrapper--top {
      transform: translateY(0);
    }

    .uni-popup__wrapper--bottom {
      transform: translateY(0);
    }
  }
  
  &__wrapper-box {
    position: relative;
    background-color: #fff;
  }
}
</style>
